<template>
  <el-dialog :model-value="props.visible" :title="'移动指定目录'" width="600px" center align-center destroy-on-close @close="onClose()">
    <div class="move-model">
      <el-tree
        ref="treeRef"
        default-expand-all
        highlight-current
        :data="treeData"
        :props="{ value: 'id', label: 'tagName', children: 'childrenList' }"
        :expand-on-click-node="false"
        node-key="id"
        @node-click="handleNode"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <img src="@/assets/images/folder.svg" />&nbsp;
            <span :class="{ active: formModel.tagId === data.id }">{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
      <el-button type="primary" @click="onSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { commonApi } from '@/api/common'

  const props = defineProps({
    tagType: {
      type: Number,
      default: 0
    },
    ids: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    }
  })
  // 表单
  const formModel = reactive({ ids: props.ids, tagId: '' })

  // 分类ID
  const handleNode = (data) => {
    formModel.tagId = data.id
  }
  const treeRef = ref()

  // 列出文件夹
  const treeData = ref()
  onMounted(() => {
    commonApi.tagList({ tagType: props.tagType }).then((res) => {
      treeData.value = res
    })
  })

  // 回调
  const emit = defineEmits(['callback'])
  const onSubmit = async () => {
    emit('callback', formModel)
  }
  const onClose = async () => {
    emit('callback', '')
  }
</script>
<style lang="scss" scoped>
  .move-model {
    max-height: calc(60vh);
    overflow: auto;
  }
</style>
